<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- <link rel="stylesheet" href="../font/iconfont.css"> -->
    <script src="../js/cookie.js"></script>

    <style>
        .createCode {
            user-select: none;
        }

        .right {
            font-size: 12px;
            color: green;
        }

        .error {
            font-size: 12px;
            color: red;
        }
    </style>
</head>

<body>
    <!-- 
        action=""  数据提交的地址(接口)
        method="get/post"  数据提交的方式

        接口: 前端和后端通信的通道  后端有专门对接的文件  

        以get方式传递数据时,会将参数数据队列拼接到url之后,以?分隔

     -->

    <form class="box" action="/login.php" method="get">
        <p>
            <label for="">用户名:</label>
            <input type="text" name="user">
            <span name="user_span"></span>
        </p>
        <p>
            <label for="">密&emsp;码:</label>
            <input type="text" name="pwd">
            <span name="pwd_span"></span>
        </p>
        <p>
            <label for="">手机号:</label>
            <input type="text" name="phone">
            <span name="phone_span"></span>
        </p>
        <p>
            <label for="">邮&emsp;箱:</label>
            <input type="text" name="email">
            <span name="email_span"></span>
        </p>
        <p>
            <input class="btn" type="submit" value="注册">
        </p>
    </form>
</body>
<script>
    // ajax背景:
    // 以前做数据交互的时候，大家通常选择使用表单的方式提交数据，表单提交这种方式，默认的时候会由当前页面跳转到action页面，所以用户体验及其糟糕，所以需要想办法让当前页面，不跳转的同时把数据传递过去，把服务器(后端)响应的内容拿回来。

    // Ajax (Asynchronous Javascript And XML)
    // - AJAX：Asynchronous Javascript And XML（异步JavaScript和XML）
    // - 交互：这里的交互指客户端和服务器的数据是可以相互传递和使用的。
    // - XML：一种类似于HTML的标记语言，可以将数据结构化，XML已经被JSON淘汰了。
    // - 异步：异步指程序可以同时执行，同步指程序需要按照顺序执行。

    // 特点:
    // 在不提交整个页面的情况下,实现页面的局部刷新;

    // ### AJAX解决的问题：

    // 指不刷新当前页面，把某些数据传递给服务器，把对应的数据从服务器拿回客户端。

    // **注意：AJAX必须依赖服务执行，即使用http/https协议来运行。


    // 测试用例:
    // 1. ajax需要服务器环境 => live Server, HbuilderX => 本地启动的假服务 => 只能做前端页面展示,没有数据库
    // 2. ajax可以请求同服务器下的其他文件 => 文件会返回文本内容
    // 3. 也可以借助现成的服务器 => 用现成的 




</script>

</html>